<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>服务工程师库存详情App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/css/oa-app.css">
<head>
    <style type="text/css">
        .td-title {
            background-color: #f5f5f5;
        }

        .text-left {
            text-align: left;
        }

        tr td:nth-of-type(2) {
            color: #228bee;
            text-align: left;
        }

        tr td:nth-of-type(4) {
            color: #228bee;
            text-align: left;
        }

        .tableTop {
            border-top: hidden;
            border-bottom: hidden;
        }

        /*.fj-tanzhongStyle .down {
            float: left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            margin-left: 10px;
        }

        .fj-tanzhongStyle .del {
            float: left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            margin-left: 10px;
        }

        .fj-tanzhongStyle .name {
            float: left;
            text-overflow:ellipsis;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            width: 50%;
        }*/
    </style>
</head>
<body>
<div id="app" style="padding-bottom: 50px;" v-cloak>
    <!--基本信息-->
    <table class="oa-table tableTop " style="border-top: 1px solid #cbcbcd">
        <thead>
        <tr class="oa-table-title">
            <th>基本信息</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table ">
        <thead>
        <tr>
            <td class="td-title">购车公司</td>
            <td colspan="3" style="text-align: left;">{{sampleParmsList.main.companyName}}</td>
        </tr>
        <tr>
            <td class="td-title">品牌</td>
            <td>{{sampleParmsList.main.brandName}}</td>
            <td class="td-title">设备类型</td>
            <td>{{sampleParmsList.main.deviceTypeName}}</td>
        </tr>
        <tr>
            <td class="td-title">型号</td>
            <td>{{sampleParmsList.main.modelName}}</td>
            <td class="td-title">吨位(吨)</td>
            <td>{{sampleParmsList.main.tonConfig}}</td>
        </tr>
        <tr>
            <td class="td-title">序列号</td>
            <td colspan="3" class="oa-lineOne " style="text-align: left;" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.sequence}}
            </td>
        </tr>
        <tr>
            <td class="td-title">配置号</td>
            <td>{{sampleParmsList.main.configurationNo}}</td>
            <td class="td-title">斗容</td>
            <td>{{sampleParmsList.main.bucketCapacity}}</td>
        </tr>
        <tr>
            <td class="td-title">铲斗类型</td>
            <td colspan="3" class="oa-lineOne" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.bucketType}}
            </td>
        </tr>
        <tr>
            <td class="td-title">订单类型</td>
            <td>{{sampleParmsList.main.orderType}}</td>
            <td class="td-title">状态</td>
            <td>{{sampleParmsList.main.state}}</td>
        </tr>
        <tr>
            <td class="td-title">生产日期</td>
            <td class="td-value"><input style="width: 100%;border: none;color: #228bee;font-size: 12px;" type="text"
                                        v-if="pageType=='edit'&&(sampleParmsList.main.state=='提车在途'||(sampleParmsList.main.currentOperation=='0'&&sampleParmsList.main.auditFlag=='2'))"
                                        @click="showTimePicker('生产日期',1)" v-model="appDate">
                <span v-else>{{dateFormat(sampleParmsList.main.productionDate)}}</span>
            </td>
            <td class="td-title">入库日期</td>
            <td style="text-align: left;">{{dateFormat(sampleParmsList.main.stockTime)}}</td>
        </tr>
        <tr>
            <td class="td-title">随机配件</td>
            <td><input style="width: 100%;border: none;color: #228bee;font-size: 12px;" type="text"
                       v-if="pageType=='edit'&&(sampleParmsList.main.state=='提车在途'||(sampleParmsList.main.currentOperation=='0'&&sampleParmsList.main.auditFlag=='2'))"
                       v-model="sampleParmsList.main.deviceParts">
                <span v-else>{{sampleParmsList.main.deviceParts}}</span></td>
            <td class="td-title">随机附件</td>
            <td><select style="width: 100%;border: none;background-color: white;color: #228bee;font-size: 12px;"
                        v-if="sampleParmsList.main.state=='提车在途'||(sampleParmsList.main.currentOperation=='0'&&sampleParmsList.main.auditFlag=='2')"
                        class=" td-row2 td-value"
                        v-model="sampleParmsList.main.deviceAnnex">
                <option value="管路">管路</option>
                <option value="铲斗">铲斗</option>
            </select>
                <span v-else class="text-left">{{sampleParmsList.main.deviceAnnex}}</span></td>
        </tr>
        <tr>
            <td class="td-title">实际交车日期</td>
            <td>{{dateFormat(sampleParmsList.main.actualDeliveryDate)}}</td>
            <td class="td-title">在库时长</td>
            <td>{{dateCha(sampleParmsList.main.actualDeliveryDate,sampleParmsList.main.stockTime)}}</td>
        </tr>
        <tr>
            <template v-if="sampleParmsList.main.deviceTypeName=='破碎锤'">
                <td class="td-title">钎杆直径</td>
                <td colspan="3">{{sampleParmsList.main.drillDiameter}}</td>
            </template>
            <template
                    v-if="sampleParmsList.main.deviceTypeName=='筛分机'|| sampleParmsList.main.deviceTypeName=='破碎机'">
                <td class="td-title">最大处理量</td>
                <td colspan="3">{{sampleParmsList.main.maxCapacity}}</td>
            </template>
        </tr>
        <tr>
            <td class="td-title">库存地</td>
            <td colspan="3" class="oa-lineOne text-left">
                <select style="width: 100%;border: none;background-color: white;color: #228bee;font-size: 12px;"
                        v-if="sampleParmsList.main.state=='提车在途'||(sampleParmsList.main.currentOperation=='0'&&sampleParmsList.main.auditFlag=='2')"
                        id="testStock" v-model="sampleParmsList.main.storeAddress">
                    <option v-for="option in stocks" :value="option.stockArea">{{option.stockArea}}</option>
                </select>
                <span v-else @click.stop="showMore($event.target)">{{sampleParmsList.main.storeAddress}}</span>
            </td>
        </tr>
        <tr>
            <template
                    v-if="sampleParmsList.main.state=='提车在途'||(sampleParmsList.main.currentOperation=='0'&&sampleParmsList.main.auditFlag=='2')">
                <td class="td-title">铭牌照片</td>
                <td colspan="2">
                    <div v-if="sampleParmsList.main.namePlateAttachName" class="oa-fj"
                         @click="look(sampleParmsList.main.namePlateAttachUrl)">
                        <b :class="fjStyle(sampleParmsList.main.namePlateAttachName)"></b>
                        <div class="name" :title="sampleParmsList.main.namePlateAttachName">
                            {{sampleParmsList.main.namePlateAttachName}}
                        </div>
                    </div>
                </td>
                <td>
                    <button v-if="!sampleParmsList.main.namePlateAttachUrl"
                            class="btn oaBtn btn-sm" style="float: right;width: 100%" @click="uploadFile()">上传
                    </button>
                    <button v-else
                            class="btn oaBtn btn-sm" style="float: right;width: 100%" @click="deleteFileRP()">删除
                    </button>
                </td>
            </template>
            <!--<td colspan="2" class="text-left">
                                <div class="fj-tanzhongStyle">
                                    <b :class="fjStyle(sampleParmsList.main.namePlateAttachName)"></b>
                                    <div class="name" :title="sampleParmsList.main.namePlateAttachName"
                                         @click="look(sampleParmsList.main.namePlateAttachUrl)">
                                        {{sampleParmsList.main.namePlateAttachName}}
                                    </div>
                                    <template v-if="sampleParmsList.main.namePlateAttachUrl">
                                    <div class="down">
                                        <span href="javascript:void(0)" class="nui-txt-link" style="color:#2a8cec;cursor: pointer;text-align: center;"
                                              @click="look(sampleParmsList.main.namePlateAttachUrl)">
                                            预览
                                        </span>
                                    </div>
                                    <div class="del">
                                        <spanddd class="nui-txt-link" style="color:#2a8cec;cursor: pointer;text-align: center;"
                                              v-on:click="deleteFileRP()">
                                            删除
                                        </spanddd>
                                    </div>
                                    </template>
                                </div>
                                &lt;!&ndash;<a href="javascript:void(0);" @click.stop="showMore($event.target)"
                                   @click="look(sampleParmsList.main.namePlateAttachUrl)"
                                   style="color: #2a8cec;">{{sampleParmsList.main.namePlateAttachName}}</a>&ndash;&gt;
                            </td>-->
            <template v-else>
                <td class="td-title">铭牌照片</td>
                <td colspan="3">
                    <div v-if="sampleParmsList.main.namePlateAttachName" class="oa-fj"
                         @click="look(sampleParmsList.main.namePlateAttachUrl)">
                        <b :class="fjStyle(sampleParmsList.main.namePlateAttachName)"></b>
                        <div class="name" :title="sampleParmsList.main.namePlateAttachName">
                            {{sampleParmsList.main.namePlateAttachName}}
                        </div>
                    </div>
                </td>
            </template>
        </tr>
        <tr>
            <td class="td-title">描述</td>
            <td colspan="3" class="oa-lineOne text-left">
                <input style="width: 100%;border: none;color: #228bee;font-size: 12px;" type="text"
                       v-if="pageType=='edit'&&(sampleParmsList.main.state=='提车在途'||(sampleParmsList.main.currentOperation=='0'&&sampleParmsList.main.auditFlag=='2'))"
                       v-model="sampleParmsList.main.description">
                <span v-else @click.stop="showMore($event.target)">{{sampleParmsList.main.description}}</span>
            </td>
        </tr>
        <tr class="oa-lineTwo-H">
            <td class="td-title">备注</td>
            <td colspan="3" class="oa-lineOne" style="text-align: left">
                <input style="width: 100%;border: none;color: #228bee;font-size: 12px;" type="text"
                       v-if="pageType=='edit'&&(sampleParmsList.main.state=='提车在途'||(sampleParmsList.main.currentOperation=='0'&&sampleParmsList.main.auditFlag=='2'))"
                       v-model="sampleParmsList.main.remark">
                <span style="text-align: left"
                      @click.stop="showMore($event.target)">{{sampleParmsList.main.remark}}</span>
            </td>
        </tr>
        </thead>
    </table>
    <!--入库物流信息-->
    <table class="oa-table tableTop">
        <thead>
        <tr class="oa-table-title">
            <th>入库物流信息</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table">
        <tbody>
        <tr>
            <td class="td-title">出发地</td>
            <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.trafficStarting}}
            </td>
        </tr>
        <tr>
            <td class="td-title">厂家联系人</td>
            <td>{{sampleParmsList.main.factoryContacts}}</td>
            <td class="td-title">电话</td>
            <td>{{sampleParmsList.main.factoryTel}}</td>
        </tr>
        <tr>
            <td class="td-title">目的地</td>
            <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.trafficDestination}}
            </td>
        </tr>
        <tr>
            <td class="td-title">接车联系人</td>
            <td>{{sampleParmsList.main.shuttleContacts}}</td>
            <td class="td-title">电话</td>
            <td>{{sampleParmsList.main.shuttleTel}}</td>
        </tr>
        <tr>
            <td class="td-title">运输公司</td>
            <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                {{sampleParmsList.main.transportCompany}}
            </td>
        </tr>
        <tr>
            <td class="td-title">运输公司联系人</td>
            <td>{{sampleParmsList.main.contacts}}</td>
            <td class="td-title">电话</td>
            <td>{{sampleParmsList.main.telephone}}</td>
        </tr>
        <!-- <template v-if="roleName!='服务工程师'">
         <tr>
             <td class="td-title">运费(含专票)/元</td>
             <td>{{sampleParmsList.main.specialFee}}</td>
             <td class="td-title">扣款(元)</td>
             <td>{{sampleParmsList.main.deductionFee}}</td>
         </tr>
         <tr>
             <td class="td-title">扣款说明</td>
             <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                 {{sampleParmsList.main.deductionRemark}}
             </td>
         </tr>
         </template>-->
        <tr>
            <td class="td-title">板车车牌</td>
            <td>{{sampleParmsList.main.drayLicense}}</td>
            <td class="td-title">运输开始日期</td>
            <td>{{dateFormat(sampleParmsList.main.transportStartTime)}}</td>
        </tr>
        <tr>
            <td class="td-title">运输结束日期</td>
            <td><input style="width: 100%;border: none;color: #228bee;font-size: 12px;" type="text"
                       v-if="pageType=='edit'&&(sampleParmsList.main.state=='提车在途'||(sampleParmsList.main.currentOperation=='0'&&sampleParmsList.main.auditFlag=='2'))"
                       @click="showTimePicker('运输结束日期',1)" v-model="appEndDate">
                <span v-else>{{dateFormat(sampleParmsList.main.transportEndTime)}}</span></td>
            <td class="td-title">司机姓名</td>
            <td>{{sampleParmsList.main.driverName}}</td>
        </tr>
        <tr>
            <td class="td-title">司机电话</td>
            <td colspan="3">{{sampleParmsList.main.driverTel}}</td>

        </tr>
        <tr>
            <td class="td-title">司机证件</td>
            <td colspan="3" class="oa-lineOne text-left">
                <div v-if="sampleParmsList.main.driverAttachName" class="oa-fj"
                     @click="look(sampleParmsList.main.driverAttachUrl)">
                    <b :class="fjStyle(sampleParmsList.main.driverAttachName)"></b>
                    <div class="name" :title="sampleParmsList.main.driverAttachName">
                        {{sampleParmsList.main.driverAttachName}}
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="td-title">板车及设备照片</td>
            <td colspan="3" class="oa-lineOne text-left">
                <div v-for="(attach,i) in sampleParmsList.devicePictures">
                    <div v-if="attach.name" class="oa-fj" @click="look(attach.url)">
                        <b :class="fjStyle(attach.name)"></b>
                        <div class="name" :title="attach.name">
                            {{attach.name}}
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <!--移库记录-->
    <template v-if="moveParmsList&&moveParmsList.main.id">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>移库记录</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table">
            <tbody>
            <tr>
                <td class="td-title">出库类型</td>
                <td>移库</td>
                <td class="td-title">移库时间</td>
                <td>{{dateFormat(moveParmsList.main.createTime)}}</td>
            </tr>

            <tr>
                <td class="td-title">原库存地</td>
                <td colspan="3">{{moveParmsList.main.pickUpAddress}}</td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{moveParmsList.main.pickUpContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{moveParmsList.main.pickUpTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">新库存地</td>
                <td colspan="3">{{moveParmsList.main.delivery_address}}</td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{moveParmsList.main.deliveryContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{moveParmsList.main.deliveryTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">运输公司</td>
                <td colspan="3">{{moveParmsList.main.transport_company}}</td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{moveParmsList.main.contacts}}</td>
                <td class="td-title">电话</td>
                <td>{{moveParmsList.main.telephone}}</td>
            </tr>
            <tr>
                <td class="td-title">板车车牌</td>
                <td colspan="3">{{moveParmsList.main.dray_license}}</td>

            </tr>
            <tr>
                <td class="td-title">司机姓名</td>
                <td>{{moveParmsList.main.driver_name}}</td>
                <td class="td-title">司机电话</td>
                <td>{{moveParmsList.main.driver_tel}}</td>
            </tr>
            <!--<template v-if="roleName!='服务工程师'">
            <tr>
                <td class="td-title">运费(含专票)/元</td>
                <td>{{moveParmsList.main.special_fee}}</td>
                <td class="td-title">扣款(元)</td>
                <td>{{moveParmsList.main.deduction_fee}}</td>
            </tr>
            <tr>
                <td class="td-title">扣款说明</td>
                <td colspan="3">{{moveParmsList.main.deduction_remark}}</td>
            </tr>
            </template>-->
            <tr>
                <td class="td-title">运输开始日期</td>
                <td>{{dateFormat(moveParmsList.main.transportStartTime)}}</td>
                <td class="td-title">运输结束日期</td>
                <td><input style="width: 100%;border: none;color: #228bee;font-size: 12px;" type="text"
                           v-if="pageType=='edit'&&(sampleParmsList.main.state=='移库在途'||(sampleParmsList.main.currentOperation=='2'&&sampleParmsList.main.auditFlag=='2'))"
                           @click="showTimePicker('运输结束日期',2)" v-model="appEndDate">
                    <span v-else>{{dateFormat(moveParmsList.main.transportEndTime)}}</span></td>
            </tr>
            <tr>
                <td class="td-title">司机证件</td>
                <td colspan="3">
                    <div v-for="(attach,i) in moveParmsList.certificates">
                        <div v-if="attach.name" class="oa-fj" @click="look(attach.url)">
                            <b :class="fjStyle(attach.name)"></b>
                            <div class="name" :title="attach.name">
                                {{attach.name}}
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td-title">板车及设备照片</td>
                <td colspan="3" class="oa-lineOne text-left">
                    <div v-for="(attach,i) in moveParmsList.devicePictures">
                        <div v-if="attach.name" class="oa-fj" @click="look(attach.url)">
                            <b :class="fjStyle(attach.name)"></b>
                            <div class="name" :title="attach.name">
                                {{attach.name}}
                            </div>
                        </div>
                    </div>
            </tr>
            <tr class="oa-lineTwo-H">
                <td class="td-title">备注</td>
                <td colspan="3" style="text-align: left" class="oa-lineOne text-left"
                    @click.stop="showMore($event.target)">
                    {{moveParmsList.main.remark}}
                </td>
            </tr>
            </tbody>
        </table>
    </template>
    <!--出库记录-->
    <template v-if="outboundParmsList&&outboundParmsList.main.id">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>出库记录</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table">
            <tbody>
            <tr>
                <td class="td-title">出库类型</td>
                <td>销售出库</td>
                <td class="td-title">出库时间</td>
                <td>{{dateFormat(outboundParmsList.main.createTime)}}</td>
            </tr>
            <tr>
                <td class="td-title">销售合同</td>
                <td colspan="3">{{contract.contractNo}}</td>
            </tr>
            <tr>

                <td class="td-title">交付客户</td>
                <td colspan="3">{{contract.buyer}}</td>
            </tr>
            <tr>
                <td class="td-title">区域经理</td>
                <td>{{contract.regionManagerName}}</td>
                <td class="td-title">电话</td>
                <td>{{contract.buyerTel}}</td>
            </tr>
            <tr>
                <td class="td-title">提车地址</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.pickUpAddress}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{outboundParmsList.main.pickUpContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{outboundParmsList.main.pickUpTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">交车地址</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.delivery_address}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{outboundParmsList.main.deliveryContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{outboundParmsList.main.deliveryTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">运输公司</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.transport_company}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{outboundParmsList.main.contacts}}</td>
                <td class="td-title">电话</td>
                <td>{{outboundParmsList.main.telephone}}</td>
            </tr>
            <tr>
                <td class="td-title">板车车牌</td>
                <td>{{outboundParmsList.main.dray_license}}</td>
                <td class="td-title">司机姓名</td>
                <td>{{outboundParmsList.main.driver_name}}</td>

            </tr>
            <tr>
                <td class="td-title">司机电话</td>
                <td colspan="3" style="text-align: left">{{outboundParmsList.main.driver_tel}}</td>
            </tr>
            <!-- <template v-if="roleName!='服务工程师'">
             <tr>
                 <td class="td-title">运费(含专票)/元</td>
                 <td>{{outboundParmsList.main.special_fee}}</td>
                 <td class="td-title">扣款(元)</td>
                 <td>{{outboundParmsList.main.deduction_fee}}</td>
             </tr>
             <tr>
                 <td class="td-title">扣款说明</td>
                 <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                     {{outboundParmsList.main.deduction_remark}}
                 </td>
             </tr>
             </template>-->
            <tr>
                <td class="td-title">运输开始日期</td>
                <td>{{dateFormat(outboundParmsList.main.transportStartTime)}}</td>
                <td class="td-title">运输结束日期</td>
                <td>{{dateFormat(outboundParmsList.main.transportEndTime)}}</td>
            </tr>
            <tr>
                <td class="td-title">司机证件</td>
                <td colspan="3">
                    <div v-for="(attach,i) in outboundParmsList.certificates">
                        <div v-if="attach.name" class="oa-fj" @click="look(attach.url)">
                            <b :class="fjStyle(attach.name)"></b>
                            <div class="name" :title="attach.name">
                                {{attach.name}}
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td-title">板车及设备照片</td>
                <td colspan="3" class="oa-lineOne text-left">
                    <div v-for="(attach,i) in outboundParmsList.devicePictures">
                        <div v-if="attach.name" class="oa-fj" @click="look(attach.url)">
                            <b :class="fjStyle(attach.name)"></b>
                            <div class="name" :title="attach.name">
                                {{attach.name}}
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr class="oa-lineTwo-H">
                <td class="td-title">备注</td>
                <td colspan="3" style="text-align: left" class="oa-lineOne text-left"
                    @click.stop="showMore($event.target)">
                    {{outboundParmsList.main.remark}}
                </td>

            </tr>
            </tbody>
        </table>
    </template>
    <!--退货记录-->
    <template v-if="exitParmsList&&exitParmsList.main.id">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>退货记录</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table">
            <tbody>
            <tr>
                <td class="td-title">出库类型</td>
                <td>退货</td>
                <td class="td-title">退货时间</td>
                <td>{{dateFormat(exitParmsList.main.createTime)}}</td>
            </tr>

            <tr>
                <td class="td-title">原库存地</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.pickUpAddress}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{exitParmsList.main.pickUpContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{exitParmsList.main.pickUpTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">新库存地</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.delivery_address}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{exitParmsList.main.deliveryContacts}}</td>
                <td class="td-title">电话</td>
                <td>{{exitParmsList.main.deliveryTelephone}}</td>
            </tr>
            <tr>
                <td class="td-title">运输公司</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.transport_company}}
                </td>

            </tr>
            <tr>
                <td class="td-title">联系人</td>
                <td>{{exitParmsList.main.contacts}}</td>
                <td class="td-title">电话</td>
                <td>{{exitParmsList.main.telephone}}</td>
            </tr>
            <tr>
                <td class="td-title">板车车牌</td>
                <td colspan="3">{{exitParmsList.main.dray_license}}</td>

            </tr>
            <tr>
                <td class="td-title">司机姓名</td>
                <td>{{exitParmsList.main.driver_name}}</td>
                <td class="td-title">司机电话</td>
                <td>{{exitParmsList.main.driver_tel}}</td>
            </tr>
            <!--<tr>
                <td class="td-title">运费(含专票)/元</td>
                <td>{{exitParmsList.main.special_fee}}</td>
                <td class="td-title">扣款(元)</td>
                <td>{{exitParmsList.main.deduction_fee}}</td>
            </tr>
            <tr>
                <td class="td-title">扣款说明</td>
                <td colspan="3" class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{exitParmsList.main.deduction_remark}}
                </td>
            </tr>-->
            <tr>
                <td class="td-title">运输开始日期</td>
                <td>{{dateFormat(exitParmsList.main.transportStartTime)}}</td>
                <td class="td-title">运输结束日期</td>
                <td><input style="width: 100%;border: none;color: #228bee;font-size: 12px;" type="text"
                           v-if="pageType=='edit'&&(sampleParmsList.main.state=='退货在途'||((sampleParmsList.main.currentOperation=='3'||sampleParmsList.main.currentOperation=='4')&&sampleParmsList.main.auditFlag=='2'))"
                           @click="showTimePicker('运输结束日期',3)" v-model="appEndDate">
                    <span v-else>{{dateFormat(exitParmsList.main.transportEndTime)}}</span></td>
            </tr>
            <tr>
                <td class="td-title">司机证件</td>
                <td colspan="3" class="oa-lineOne text-left">
                    <div v-for="(attach,i) in exitParmsList.certificates">
                        <div v-if="attach.name" class="oa-fj" @click="look(attach.url)">
                            <b :class="fjStyle(attach.name)"></b>
                            <div class="name" :title="attach.name">
                                {{attach.name}}
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td-title">板车及设备照片</td>
                <td colspan="3" class="oa-lineOne text-left">
                    <div v-for="(attach,i) in exitParmsList.devicePictures">
                        <div v-if="attach.name" class="oa-fj" @click="look(attach.url)">
                            <b :class="fjStyle(attach.name)"></b>
                            <div class="name" :title="attach.name">
                                {{attach.name}}
                            </div>
                        </div>
                    </div>
                </td>

            </tr>
            <tr class="oa-lineTwo-H">
                <td class="td-title">备注</td>
                <td colspan="3" style="text-align: left" class="oa-lineOne text-left"
                    @click.stop="showMore($event.target)">
                    {{exitParmsList.main.remark}}
                </td>

            </tr>
            </tbody>
        </table>
    </template>
    <!--审批进度-->
    <template v-if="pageType=='look'">
        <table class="oa-table tableTop">
            <thead>
            <tr class="oa-table-title">
                <th>审批进度</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table">
            <tbody>
            <tr>
                <td class="td-title">审核人员</td>
                <td class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{sampleParmsList.main.auditName}}-{{sampleParmsList.main.auditRoleName}}
                </td>
                <td class="td-title">审核状态</td>
                <td>{{convertAuditFlagToName(sampleParmsList.main.auditFlag)}}</td>
            </tr>

            <tr>
                <td class="td-title">审核时间</td>
                <td class="oa-lineOne text-left" @click.stop="showMore($event.target)">
                    {{dateFormat(sampleParmsList.main.auditTime)}}
                </td>
                <td class="td-title">审核意见</td>
                <td>{{sampleParmsList.main.auditAdvise}}</td>
            </tr>
            </tbody>
        </table>
    </template>
    <template v-if="pageType=='edit'">
        <div class="oa-footer-btn" @click="save()">提交</div>
    </template>
</div>
</div>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            appDate: '',
            appEndDate: '',
            pageType: getUrlParamObj().pageType,
            stocks: [],
            roleName: '',
            searchParams: {
                id: getUrlParamObj().id,
                userId: getUrlParamObj().userId,
                pageType: getUrlParamObj().pageType,
            },
            outboundParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            moveParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            exitParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            logisticParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            sampleParmsList: {
                attaches: [],//提货信息中附件
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {},
            },
            contract: {
                id: "",
                buyType: "",
                zhihuan: "",
                diankuan: "",
                regionManagerName: "",
                regionManagerId: "",
                companyId: "",
                contractNo: "",
                contractType: ""
            },
            RepaymentPlanList: [],
            deviceParts: [],
            RepaymentPlanNum: {},
            uploader: null,
        },
        methods: {
            convertAuditFlagToName: function (auditFlag) {
                switch (auditFlag) {
                    case -1:
                        return "未提交";
                        break;
                    case 0:
                        return "审核中";
                        break;
                    case 1:
                        return "通过";
                        break;
                    case 2:
                        return "驳回";
                        break;
                    default:
                        break;
                }
            },
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if (mydiv.offsetParent === null) {
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop + el.getBoundingClientRect().top + el.offsetHeight + "px")
                    } else {
                        mydiv.style.display = 'none';
                    }

                } else {
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            uploadFile: function () {
                var that = this
                JSBridge.call(FILE, 'uploadFile', {}, function (res) {
                    that.sampleParmsList.main.namePlateAttachUrl = res.sendData.url;
                    that.sampleParmsList.main.namePlateAttachName = res.sendData.name;
                })
            },
            // ---------------ui-----------------
            showToast: function (title) {
                var param = {
                    title: title
                }
                JSBridge.call(UI, 'showToast', param)
            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)
            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            },
            dateFormat: function (date) {
                var that = this;
                if (date != undefined && date != 'NaN' && date != '') {
                    var da = new Date(date).Format(TimeFormat.pcListYR);
                    return da;
                } else {
                    return '';
                }
            },
            look: function (url) {
                var param = {
                    url: url,
                }
                JSBridge.call(FILE, 'showFile', param)
            },
            dateCha: function (endDate, startDate) {
                if (endDate != '' && startDate != '') {
                    var sDate = new Date(startDate);
                    var eDate = new Date(endDate);

                    var daCha = (eDate - sDate) / (1000 * 60 * 60 * 24);
                    return daCha + '天';
                } else {
                    return '';
                }

            },
            showTimePicker: function (name, type) {
                var that = this
                var param = {
                    title: '请选择',                                       //提示文字
                    startDate: '2018-01-01 00:00:00',                   //开始日期时间
                    endDate: '2020-12-12 00:00:00',                     //结束日期时间
                    //selectedDate: '2019-01-01 12:18:58'                //默认是当前时间
                    showYear: true,                                     //显示年
                    showMonth: true,                                    //显示月
                    showDay: true,                                      //显示日
                    showHour: false,                                     //显示时
                    showMinute: false,                                   //显示分
                    showSecond: false,                                   //显示秒

                }
                JSBridge.call(CALENDAR, 'showTimePicker', param, function (res) {
                    var pcDate = new Date(res.sendData.data).Format('yyyy-MM-dd');
                    //1月1日
                    var shDate = new Date(res.sendData.data).Format(TimeFormat.pcListYR);
                    if (name == '生产日期') {
                        that.sampleParmsList.main.productionDate = pcDate;
                        that.appDate = shDate;
                    } else if (name == '运输结束日期') {
                        if (type == 1) {
                            that.sampleParmsList.main.transportEndTime = pcDate;
                            that.sampleParmsList.main.stockTime = pcDate;
                        } else if (type == 2) {
                            that.moveParmsList.main.transportEndTime = pcDate;
                        } else {
                            that.exitParmsList.main.transportEndTime = pcDate;
                        }
                        that.appEndDate = shDate;
                    }
                })
            },
            save: function () {
                var that = this;
                that.showLoading();
                that.sampleParmsList.main.auditFlag = '0';
                if (that.sampleParmsList.main.state == '提车在途') {
                    that.sampleParmsList.main.state = '库存';
                }
                if (that.sampleParmsList.main.state == '移库在途') {
                    that.sampleParmsList.main.state = '库存';
                    that.sampleParmsList.main.auditFlag = '1';
                    that.sampleParmsList.main.newCompanyId = that.moveBound.main.newCompanyId;
                }
                if (that.sampleParmsList.main.state == '退货在途') {
                    if (that.sampleParmsList.main.currentOperation == 3) {
                        that.sampleParmsList.main.state = '库存';
                    } else {
                        that.sampleParmsList.main.state = '已退货';
                    }
                }
                that.sampleParmsList.main.updateUserId = getUrlParamObj().userId;
                that.sampleParmsList.main.updateUserName = that.userName;
                var data = {
                    outModule: that.outboundParmsList,
                    exitModule: that.exitParmsList,
                    moveModule: that.moveParmsList,
                    sampleModule: that.sampleParmsList,
                    repaymentPlanList: that.RepaymentPlanList,
                    logisticsModule: that.logisticParmsList
                }
                data.sampleModule.deviceParts = that.deviceParts;
                axios({
                    url: '/deviceSampleNew/update.json',
                    method: 'post',
                    data: data,
                }).then(function (response) {
                    that.hideLoading();
                    that.showToast('保存成功');
                    var param = {
                        backRefresh: true,       //是否返回刷新
                    }
                    JSBridge.call(ROUTER, 'navigateBack', param)
                }).catch(function (error) {
                    that.hideLoading();
                    that.showToast('服务器内部错误，请联系管理员');
                });


            },
            deleteFileRP: function () {
                var that = this;
                var param = {
                    //title: "提示的标题",
                    content: "确定要删除该附件吗",
                    cancelText: "取消",
                    confirmText: "确定",
                    showCancel: true,
                    cancelable: false
                }
                that.dialogResult = "等待选择..."
                JSBridge.call(UI, 'showDialog', param, function (res) {
                    var dialogResult = res.sendData.data;
                    if (dialogResult == '确定') {
                        that.sampleParmsList.main.namePlateAttachName = '';
                        that.sampleParmsList.main.namePlateAttachUrl = '';
                    }
                })

            },
            fjStyle: function (fjName) {
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
        },
        mounted: function () {
            var that = this;
            that.showLoading();
            axios({
                url: '/deviceSample/getSampleById.json',
                method: 'post',
                data: {"id": getUrlParamObj().id},
            }).then(function (response) {
                that.sampleParmsList.main = response.sampleParmsList;
                axios({
                    url: '/company/getCompanyById.json',
                    method: 'post',
                    data: {
                        id: that.sampleParmsList.main.fkCompanyId
                    },
                }).then(function (response) {
                    that.stocks = response.stock;
                }).catch(function (error) {
                    console.log(error);
                });
                that.storeDuration = that.sampleParmsList.main.storeDuration;
                //that.auditHistorys = r.auditHistory;
                if (that.sampleParmsList.main.auditFlag == 0) {
                    that.sampleParmsList.main.auditAdvise = '';
                }
                that.RepaymentPlanList = response.repaymentPlanList;
                that.deviceParts = response.deviceParts;
                that.sampleParmsList.attaches = response.attaches;
                that.sampleParmsList.certificates = response.certificates;
                that.sampleParmsList.devicePictures = response.devicePictures;
                that.sampleParmsList.drayPictures = response.drayPictures;
                that.appDate = that.dateFormat(that.sampleParmsList.main.productionDate);
                that.appEndDate = that.dateFormat(that.sampleParmsList.main.transportEndTime);
                if (response.outBoundrecord.id != undefined) {
                    that.outboundParmsList.main = response.outBoundrecord;
                    that.outboundParmsList.certificates = response.outcertificates;
                    that.outboundParmsList.devicePictures = response.outdevicePictures;
                    that.outboundParmsList.drayPictures = response.outdrayPictures;
                    that.contract = response.outBoundrecord.contract;
                }
                if (response.logistics.id != undefined) {
                    that.logisticParmsList.main = response.logistics;
                    that.logisticParmsList.certificates = response.lcertificates;
                    that.logisticParmsList.devicePictures = response.ldevicePictures;
                }
                if (response.exitBoundrecord.id != undefined) {
                    that.exitParmsList.main = response.exitBoundrecord;
                    that.exitParmsList.certificates = response.exitcertificates;
                    that.exitParmsList.devicePictures = response.exitdevicePictures;
                    that.exitParmsList.drayPictures = response.exitdrayPictures;
                    that.appEndDate = that.dateFormat(that.exitParmsList.main.transportEndTime);
                }
                if (response.moveBoundrecord.id != undefined) {
                    that.moveParmsList.main = response.moveBoundrecord;
                    that.moveParmsList.certificates = response.movecertificates;
                    that.moveParmsList.devicePictures = response.movedevicePictures;
                    that.moveParmsList.drayPictures = response.movedrayPictures;
                    that.appEndDate = that.dateFormat(that.moveParmsList.main.transportEndTime);
                }
            }).catch(function (error) {
                that.hideLoading();
            });
            axios({
                url: '/user/getUserViewById.json',
                method: 'post',
                data: {
                    id: getUrlParamObj().userId
                },
            }).then(function (response) {
                that.roleName = response.roleName;
                that.userName = response.name;
            }).catch(function (error) {
                console.log(error);
            });
        }
    })
</script>
</body>
</html>